<template>
  <component :is="dynamicIcon" v-bind="$attrs" />
</template>

<script setup>
import { onMounted, shallowRef } from "vue";
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
});
const dynamicIcon = shallowRef("");
const loadSvgIcon = async (iconName) => {
  try {
    // 动态导入SVG文件，这里假设SVG文件都在src/assets/icons目录下
    const { default: icon } = await import(
        /* @vite-ignore */ `../../icons/${iconName}.svg?component`
        );
    // 将导入的SVG文件设置为组件
    dynamicIcon.value = icon;
  } catch (error) {
    console.error("Error loading SVG icon:", error);
  }
};
onMounted(() => {
  loadSvgIcon(props.name);
});
</script>
